<template>
  <div class="form-card">
    <form @submit.prevent="onSubmit">
      <div class="form-row">
        <label>{{ $t('reset.idNumber') }}</label>
        <input v-model="form.idNumber" required />
      </div>
      <div class="form-row">
        <label>{{ $t('reset.mobile') }}</label>
        <input v-model="form.mobile" required />
      </div>
      <div class="form-row">
        <label>{{ $t('reset.newPassword') }}</label>
        <input type="password" v-model="form.newPassword" required />
      </div>
      <div class="actions-center">
        <button class="btn-primary" type="submit">{{ $t('reset.submit') }}</button>
      </div>
    </form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'ResetInline',
  data() {
    return { form: { idNumber: '', mobile: '', newPassword: '' } }
  },
  methods: {
    async onSubmit() {
      try {
        await axios.post('/api/auth/reset-password', this.form)
        alert('Password updated')
        this.$emit('success')
      } catch (e) {
        alert('Failed to reset')
      }
    }
  }
}
</script>

<style scoped>
</style>
